<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>

    </style>
    <script src="vue.js"></script>
</head>
<body>
    <div id="box">
        <div>
            姓名:<input type="text" v-model="newName">
            年龄:<input type="text" v-model="newAge">
            <br>
            <button @click="add">添加</button>
        </div>
        <div>
            <br>
            筛选
            <br>
            <input type="text" v-model="filterValue">
            <br>
        </div>
        <table>
            <tr>
                <th>序号</th>
                <th>名称</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
            <tr v-for="value in json | filterBy filterValue">
                <td>
                    {{$index+1}}
                </td>
                <td>
                    {{value.name}}
                </td>
                <td>
                    {{value.age}}
                </td>
                <td>
                    <button @click="del($index)">删除</button>
                </td>
            </tr>
        </table>
    </div>
</body>

<script>
    new Vue({
        el:'#box',
        data:{
            newName:'',
            newAge:'',
            filterValue:'',
            json:[
                {name:'张三',age:'28'},
                {name:'李四',age:'24'}
            ]
        },
        methods:{
            add : function(){
                if(this.newName == '' || this.newAge == ''){
                    alert("请填写完整信息");
                }else{
                    this.json.push({name: this.newName, age: this.newAge});
                    this.newName = "";
                    this.newAge = "";
                }
            },
            del : function(v){
                this.json.splice(v,1);
                alert(JSON.stringify(v));
            }
        }
    });
</script>
</html>



















